<template>
  <div class="search-list">
    <van-sticky :offset-top="0">
      <div class="search">
        <van-icon name="arrow-left" color="#fff" @click="router.go(-1)" />
        <van-search
          v-model="searchvh"
          shape="round"
          background="#B0352F"
          placeholder="请输入搜索关键词"
          clearable
        />
        <span @click="onSeach">搜索</span>
      </div>
      <van-dropdown-menu @change="onChange">
        <van-dropdown-item v-model="value1" :options="option1" disabled />
        <van-dropdown-item
          v-model="value2"
          :options="option2"
          @change="onChange"
        />
      </van-dropdown-menu>
    </van-sticky>

    <ul>
      <li v-for="item in goodsList">
        <img :src="item.imgUrl" alt="" />
        <van-text-ellipsis :content="item.name" style="font-size: 14px" />

        <div class="jiage">
          <p class="p1">￥{{ item.price }}</p>
          <p class="p2">立即购买</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import http from "@/utils/index";
import { showFailToast,showLoadingToast, closeToast } from "vant";

let router = useRouter();
let route = useRoute();
let searchvh = ref("");
let goodsList = ref([]);

const value1 = ref(0);
const value2 = ref("1");
const option1 = [{ text: "全部商品", value: 0 }];
const option2 = [
  { text: "价格由低到高", value: "1" },
  { text: "价格由高到低", value: "2" },
];

onMounted(async () => {
  let searchName = route.query.name;
  searchList(searchName);
  //  let res = await http.get("/Goods/list", {
  //   params: {
  //      name: route.query.name || "",
  //      id:1
  //     },
  // });
  // if (res.status == 10000) {

  //   goodsList.value=res.data
  // }
});
let onChange = async (val) => {
  let res = await http.get("/Goods/list", {
    params: {
      name: searchvh.value,
      id: val,
    },
  });
  if (res.status == 10000) {
    goodsList.value = res.data;
  }
};

let onSeach = async () => {
  let res = await http.get("/Goods/list", {
    params: {
      name: searchvh.value,
      id: 1,
    },
  });
  if (res.status == 10000) {
    goodsList.value = res.data;
  }
};

let searchList = async (val) => {
  let res = await http.get("/Goods/list", {
    params: {
      name: searchvh.value || val,
      id: 1,
    },
  });
  if (res.status == 10000) {
    goodsList.value = res.data;

    try {
      if (goodsList.value.length) {
        goodsList.value = res.data;
      }
    } catch (e) {
      // console.log(e.message);
      showFailToast("搜索结果为空");
      setTimeout(()=>{
       router.go(-1);
      },2000)

     
    }
  }
};

</script>

<style lang="scss" scoped>
.search-list {
  .search {
    display: flex;
    justify-content: space-around;
    background-color: #b0352f;
    align-items: center;
    span {
      font-size: 19px;
      color: #fff;
      margin-right: 10px;
    }
    .van-search {
      width: 275px;
    }
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 20px;
    li {
      width: 160px;
      height: 230px;
      margin-bottom: 20px;
      background-color: rgb(250, 253, 252);
    }
    img {
      width: 100%;
      height: 100;
    }
    p {
      font-size: 14px;
    }
    .jiage {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
      .p1 {
        color: red;
        font-size: 18px;
      }
      .p2 {
        width: 80px;
        line-height: 29px;
        background-color: red;
        border-radius: 8px;
        text-align: center;
        color: #fff;
        cursor: pointer;
      }
    }
  }
}
</style>
